<template>
	<view class="index">
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					城市仓
				</view>
				<view class="content">
					<text v-if="form.lineCode">{{ form.lineCode + form.lineName }}</text>
					<text v-if="form.lineCode">-</text>
					<text>{{ form.cityCode + form.cityName }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					停车位
				</view>
				<view class="content">
					<text>{{ form.parkingSpace }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					车辆
				</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<text class="label">车牌</text>
					<view class="value">
						<text>{{form.licensePlateNo}}</text>
						<text v-if="form.vehicleModel">（{{form.vehicleModel}}）</text>
					</view>
				</view>
				<view class="form-item">
					<text class="label">司机</text>
					<view class="value">
						<input type="text" disabled v-model="form.driverName" placeholder="请输入司机" class="input" />
					</view>
				</view>
				<!-- <view class="form-item">
					<text class="label">运费</text>
					<view class="value">
						<input type="digit" v-model="form.freight" placeholder="请输入运费" class="input" />
					</view>
					<text class="unit">元</text>
				</view> -->
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					目的地：{{ form.cityName }}仓
				</view>
			</view>
			<view class="form-content">
				<view class="form-item-wrapper" v-for="(item,index) in transportDestination" :key="index">
					<view class="form-item">
						<view class="value">
							<text>{{ index + 1 }}、</text>
							<text>{{ item.pickupPointName }}</text>
						</view>
						<uni-icons type="trash" @tap="removeDest(index)" size="22" color="#666666"></uni-icons>
					</view>
					<view class="info-item">
						{{ item.pointAddress }}
					</view>
				</view>
				<view class="add-btn" @click="addDest">
					+ 添加目的地
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					载货阶段
				</view>
				<view class="content">
					<text>{{ form.schemaCaption }}</text>
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					载货
				</view>
			</view>
			<view class="form-content">
				<view class="form-item" v-for="(item,index) in pickupPointList" :key="index">
					<view class="value">
						<text>{{ index + 1 }}、</text>
						<text>{{ item.pickupPointName }}</text>
					</view>
					<!-- <text class="unit">当前 {{ item.actualTonnage || 0 }}吨</text> -->
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="form-title">
				<view class="title">
					计划送达
				</view>
				<view class="content">
					<uni-datetime-picker type="date" v-model="form.mayArrivalDate">
						<text v-if="form.mayArrivalDate">{{ form.mayArrivalDate }}</text>
						<text v-else class="placeholder">选择</text>
						<uni-icons type="right" size="18" color="#999999"></uni-icons>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
		<view class="form-wrapper" v-if="imagelist.length">
			<view class="form-title">
				<view class="title">
					图片
				</view>
			</view>
			<view class="product-image-list">
				<view class="item" v-for="(item,index) in imagelist" :key="index">
					<image @click="openPic(index)" :src="item+ '?imageView2/3/w/300/q/100'" class="product-image"
						mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="form-wrapper" v-if="form.remark">
			<view class="form-title">
				<view class="title">
					备注
				</view>
			</view>
			<view class="form-content">
				<view class="form-item">
					<view class="value">
						<textarea v-model="form.remark" disabled maxlength="200" placeholder="" class="textarea" />
					</view>
				</view>
			</view>
		</view>

		<view class="btn-wrapper" @click="submit">
			确定
		</view>

		<uni-popup ref="destPopup">
			<view class="dest-popup-wrapper">
				<view class="title-wrapper">
					<text>添加目的地</text>
					<uni-icons type="closeempty" size="26" @click="closeDest"></uni-icons>
				</view>
				<view class="item" @click="setDest(item)" v-for="(item,index) in destList" :key="index">
					<view class="label">
						{{ item.pickupPointName }}
					</view>
					<view class="address">
						{{ item.pointAddress }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				form: {
					id: null,
					cityId: null,
					cityCode: null,
					cityName: null,
					supplyWarehouseId: null,
					supplyWarehouseCode: null,
					supplyWarehouseName: null,
					lineCode: null,
					lineName: null,
					parkingId: null,
					parkingSpace: null,
					loaderId: null,
					loaderName: null,
					transportDestination: null,
					driverName: null,
					driverTel: null,
					freight: null,
					handlingCharges: null,
					licensePlateNo: null,
					cargoList: [],
					dispatchId: null,
					dispatchDate: null,
					mayArrivalDate: '',
					schemaCaption: '',
					remark: '',
					imageUrl: ''
				},
				pickupPointList: [], // 自提点列表
				transportDestination: [], //目的地
				destList: [], //可选目的地
				imagelist: []
			}
		},
		onLoad(option) {
			const params = JSON.parse(option.params)
			this.form.id = option.id;
			this.form.cityId = params.cityId;
			this.form.cityCode = params.cityCode;
			this.form.cityName = params.cityName;
			this.form.supplyWarehouseId = params.supplyWarehouseId;
			this.form.supplyWarehouseCode = params.supplyWarehouseCode;
			this.form.supplyWarehouseName = params.supplyWarehouseName;
			this.form.lineCode = params.lineCode;
			this.form.lineName = params.lineName;
			this.form.dispatchId = params.id;
			this.form.dispatchDate = params.dispatchDate;
			this.getPickupPointTonnage(params.lineId)
			//this.getInfo()
		},
		computed: {
			totalTonnage() {
				let number = 0;
				this.pickupPointList.forEach(item => {
					number += parseFloat(item.actualTonnage || 0)
				})
				return number;
			},
		},
		methods: {
			async getInfo() {
				const data = await this.$api.get('/adm/transport/getInfo', {
					id: this.form.id
				})
				if (data.code === 200) {
					const item = data.data;
					this.form.driverName = item.driverName;
					if (item.driverTel) {
						this.form.driverName += `(${item.driverTel})`
					}
					this.form.driverTel = item.driverTel;
					this.form.licensePlateNo = item.licensePlateNo;
					this.form.vehicleDriverId = item.vehicleDriverId;
					this.form.vehicleModel = item.vehicleModel;
					this.form.parkingSpace = item.parkingSpace;
					this.form.freight = item.freight;
					this.form.mayArrivalDate = item.mayArrivalDate;
					this.form.schemaCaption = item.schemaCaption;
					this.form.remark = item.remark;
					this.pickupPointList = this.pickupPointList.filter(row => {
						const objIndex = item.cargoList.findIndex(rows => rows.pickupPointId === row
							.pickupPointId)
						row.cityName = item.cargoList[objIndex].cityName;
						return objIndex > -1;
					})
					if (item.imageUrl) {
						this.imagelist = item.imageUrl.split(',');
					}
					const obj = this.pickupPointList.find(row => row.dotLevel === '0')
					if (obj) {
						this.transportDestination.push(obj)
					}
				}
			},
			async getPickupPointTonnage(id) {
				const data = await this.$api.post('/adm/transport/getPickupPointTonnage', {
					//lineId: id,
					cityId: this.form.cityId,
					supplyDate: this.form.dispatchDate,
					supplyWarehouseId: this.form.supplyWarehouseId
				}, false)
				if (data.code === 200) {
					data.data.forEach(item => {
						item.selected = false;
					})
					this.pickupPointList = data.data;
					this.getInfo()
				}
			},
			addDest() {
				this.destList = this.pickupPointList.filter(item => {
					const objIndex = this.transportDestination.findIndex(rows => rows.pickupPointId === item
						.pickupPointId)
					return objIndex === -1;
				})
				if (!this.destList.length) {
					uni.showToast({
						title: '没有可添加的目的地',
						icon: 'none'
					})
					return
				}
				console.log(this.destList)
				this.$refs.destPopup.open('bottom')
			},
			closeDest() {
				this.$refs.destPopup.close()
			},
			setDest(item) {
				this.transportDestination.push(item)
				this.closeDest()
			},
			openPic(index) {
				uni.previewImage({
					urls: this.imagelist,
					current: index
				});
			},
			removeDest(index) {
				this.$showModal({
					title: '删除确认',
					content: '是否要删除该目的地？',
					confirmText: '删除',
					cancelText: '手滑了',
					success: async (res) => {
						if (res.confirm) {
							this.transportDestination.splice(index, 1)
							uni.showToast({
								title: '已删除'
							})
						}
					}
				})
			},
			async submit() {
				if (this.disabled) return
				const params = {
					...this.form
				}
				// if (!this.form.driverName) {
				// 	uni.showToast({
				// 		title: '请输入司机',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (!this.form.freight) {
				// 	uni.showToast({
				// 		title: '请输入运费',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				if (!this.transportDestination.length) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
					return
				}
				const transportDestination = this.transportDestination.map((item, index) => {
					return {
						index: index + 1,
						...item,
					}
				})
				params.transportDestination = JSON.stringify(transportDestination)
				console.log(params)
				this.disabled = true;
				params.driverName = null;
				const data = await this.$api.post('/adm/transport/depart', params)
				if (data.code === 200) {
					uni.showToast({
						title: '操作成功'
					})
					var pages = getCurrentPages();
					const preRoute = pages[pages.length - 2].route; //获取当前页面路由
					setTimeout(() => {
						if (preRoute === 'subPage_transport/index') {
							pages[pages.length - 2].$vm.refresh()
						}
						uni.navigateBack();
					}, 1000)
				} else {
					this.disabled = false;
				}
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding: 0 24upx;
		padding-bottom: 150upx;

		.form-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin-top: 20upx;

			.form-title {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 30upx;

				.title {
					font-size: 32upx;
					border-left: 8upx solid #555BFF;
					padding-left: 20upx;
					height: 32upx;
					font-weight: bold;
					color: #141414;
				}

				.content {
					color: #3B3B3B;
					font-size: 30upx;
					display: flex;
					align-items: center;

					.placeholder {
						color: #666666;
					}
				}
			}

			.product-image-list {
				display: flex;
				flex-wrap: wrap;
				padding: 0 3%;

				.item {
					position: relative;
					width: 32%;
					height: 206upx;
					border-radius: 20upx;
					overflow: hidden;
					margin-left: 2%;
					margin-bottom: 20upx;

					&.add-item {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F0F0F0;
					}

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					.playImage {
						position: absolute;
						width: 50upx;
						height: 50upx;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.product-image {
						width: 100%;
						height: 100%;
					}

					.del-wrapper {
						position: absolute;
						width: 50upx;
						height: 50upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(0, 0, 0, .5);
						top: 0;
						right: 0;
					}

					.bottom-btn {
						position: absolute;
						width: 100%;
						height: 60upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgba(0, 0, 0, .5);
						bottom: 0;
						left: 0;
						color: #ffffff;

						&.current {
							color: #0D8EFF;
						}
					}
				}
			}

			.form-content {
				padding-bottom: 10upx;

				.form-item {
					display: flex;
					align-items: center;
					padding: 0 30upx;
					margin-bottom: 20upx;

					.label {
						color: #565656;
						width: 140upx;
					}

					.value {
						flex: 1;
						color: #3B3B3B;
						text-align: left;
						display: flex;
						align-items: center;

						.input {
							width: 100%;
						}

						.textarea {
							width: 100%;
							height: 150rpx;
						}
					}

					.unit {
						margin-left: 20upx;
						color: #676767;
					}
				}

				.info-item {
					padding: 0 30upx;
					font-size: 28upx;
					color: #898989;
					margin-top: -15upx;
					margin-bottom: 20upx;
				}

				.add-btn {
					font-size: 28upx;
					color: #555BFF;
					margin-left: 30upx;
					margin-bottom: 20upx;
				}
			}
		}

		.btn-wrapper {
			height: 100upx;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #555BFF;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			transition: .1s linear;

			&:active {
				background-color: #555BFFaa;
			}
		}

		.dest-popup-wrapper {
			min-height: 900upx;
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			position: relative;
			bottom: calc(0upx - env(safe-area-inset-bottom));

			.title-wrapper {
				height: 88upx;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				padding: 0 32upx;
				border-radius: 20upx 20upx 0 0;
				justify-content: space-between;
			}

			.item {
				min-height: 88upx;
				padding: 20upx 32upx;
				border-bottom: 2upx solid #efefef;

				.label {
					color: #212121;
					font-size: 34upx;
					font-weight: bold;
				}

				.address {
					font-size: 28upx;
					color: #777777;
					margin-top: 10upx;
				}
			}
		}
	}
</style>